<template>
  <div class="userinfo-page min-h-screen bg-gray-50 flex items-center justify-center py-8">
    <div class="flex gap-6 w-full max-w-7xl">
      <!-- 左侧：用户信息卡片和菜单卡片上下排列 -->
      <div class="left-panel flex flex-col gap-4 flex-shrink-0">
        <el-card class="userinfo-card" shadow="always">
          <div class="w-16 h-16 bg-blue-100 rounded-full mx-auto mb-3 flex items-center justify-center">
            <el-icon :size="32" color="#409EFF">
              <User />
            </el-icon>
          </div>
          <h3 class="font-semibold mb-1 text-center">小豆黑白</h3>
          <p class="text-sm text-gray-500 mb-3 text-center">加入会员，享受更多特权</p>
          <el-button type="primary" size="small" class="w-full" @click="goToMyGroups">开通会员</el-button>
        </el-card>
        <el-card class="menu-card" shadow="always">
          <div v-for="section in menuSections" :key="section.title" class="mb-6">
            <h4 class="text-sm font-medium text-gray-500 mb-3 px-2">{{ section.title }}</h4>
            <div class="space-y-1">
              <div
                v-for="item in section.items"
                :key="item.id"
                @click="activeTab = item.id"
                :class="[
                  'w-full flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer transition-colors',
                  activeTab === item.id
                    ? 'bg-blue-50 text-blue-600 border border-blue-200'
                    : 'hover:bg-gray-50 text-gray-700'
                ]"
              >
                <div class="flex items-center">
                  <el-icon class="mr-3">
                    <component :is="item.icon" />
                  </el-icon>
                  <span class="text-sm">{{ item.label }}</span>
                </div>
                <div class="flex items-center">
                  <el-tag
                    v-if="item.badge"
                    size="small"
                    type="danger"
                    class="mr-2"
                  >
                    {{ item.badge }}
                  </el-tag>
                  <el-icon v-if="activeTab === item.id">
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 右侧：内容卡片 -->
      <el-card class="content-card flex-1" shadow="always">
        <div class="max-w-4xl mx-auto">
          <!-- 个人资料页面 -->
          <OrderDetails v-if="activeTab === 'order-details'" @tab-switch="handleTabSwitch" :order="currentOrder" />
          <component
            v-else
            :is="tabComponentMap[activeTab]"
            @pay="handlePay"
            @tab-switch="handleTabSwitch"
          />
          <!-- <div v-else class="placeholder-container">
            <div class="placeholder-content">
              <div class="text-4xl mb-4">❓</div>
              <h3 class="text-xl font-semibold text-gray-600 mb-2">未知页面</h3>
              <p class="text-gray-500">页面不存在</p>
            </div>
          </div> -->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from 'vue-router'
import {
  User,
  Lock,
  Setting,
  Document,
  Folder,
  Star,
  DataAnalysis,
  ChatDotSquare,
  TrendCharts,
  ArrowRight,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// 导入内容组件
import Profile from './Profile.vue'
import Security from './Security.vue'
import AccountSettings from './AccountSettings.vue'
import MyPosts from './MyPosts.vue'
import MyGroups from './MyGroups.vue'
import MyFiles from './MyFiles.vue'
import Favorites from './Favorites.vue'
import MyProjects from './MyProjects.vue'
import OrderDetails from './OrderDetails.vue'
import CreationData from './CreationData.vue'
import TrafficAnalysis from './TrafficAnalysis.vue'
import TrafficManagement from './TrafficManagement.vue'

// 定义tab类型
type TabId =
  | 'profile'
  | 'security'
  | 'account-settings'
  | 'my-posts'
  | 'my-groups'
  | 'my-files'
  | 'favorites'
  | 'my-projects'
  | 'order-details'
  | 'creation-data'
  | 'traffic-analysis'
  | 'traffic-management'

// 左侧菜单配置
const menuSections = [
  {
    title: '设置',
    items: [
      { id: 'profile' as TabId, label: '个人资料', icon: User },
      { id: 'security' as TabId, label: '账号安全', icon: Lock },
      { id: 'account-settings' as TabId, label: '账号绑定', icon: Setting },
    ],
  },
  {
    title: '账户',
    items: [
      { id: 'my-posts' as TabId, label: '我的钱包', icon: Document },
      { id: 'my-groups' as TabId, label: '我的会员', icon: Document },
    ],
  },
  {
    title: '文件',
    items: [
      { id: 'my-files' as TabId, label: '我的文件', icon: Folder },
      { id: 'favorites' as TabId, label: '收藏夹', icon: Star },
      { id: 'my-projects' as TabId, label: '我的项目', icon: DataAnalysis },
    ],
  },
  {
    title: '数据',
    items: [
      { id: 'order-details' as TabId, label: '订单详情', icon: ChatDotSquare },
      { id: 'creation-data' as TabId, label: '创作数据', icon: TrendCharts, badge: 'Beta' },
      { id: 'traffic-analysis' as TabId, label: '流量分析', icon: DataAnalysis, badge: 'Beta' },
      { id: 'traffic-management' as TabId, label: '流量管理', icon: DataAnalysis, badge: 'Beta' },
    ],
  },
]

// 响应式数据
const activeTab = ref<TabId>('profile')
const nickname = ref('小豆黑白')
const introduction = ref('')
const currentOrder = ref<any>(null)
const route = useRoute()
const router = useRouter()

// 根据路由参数自动切换tab
watch(
  () => route.query.tab,
  (tab) => {
    if (tab && typeof tab === 'string') {
      activeTab.value = tab as TabId
    }
  },
  { immediate: true }
)

// 通用 tab 切换函数
function handleTabSwitch(tab: TabId) {
  console.log(tab)
  activeTab.value = tab
}

// 方法
const updateProfile = () => {
  ElMessage.success('基本信息更新成功！')
}

function handlePay(order: any) {
  currentOrder.value = order
  activeTab.value = 'order-details'
}

function goToMyGroups() {
  activeTab.value = 'my-groups'
  router.replace({ query: { ...route.query, tab: 'my-groups' } })
}

// 动态内容组件映射
const tabComponentMap = {
  profile: Profile,
  security: Security,
  'account-settings': AccountSettings,
  'my-posts': MyPosts,
  'my-groups': MyGroups,
  'my-files': MyFiles,
  favorites: Favorites,
  'my-projects': MyProjects,
  'order-details': OrderDetails,
  'creation-data': CreationData,
  'traffic-analysis': TrafficAnalysis,
  'traffic-management': TrafficManagement,
}

</script>

<style scoped>
.userinfo-page {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.gap-6 {
  gap: 1.5rem;
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.userinfo-card {
  width: 260px;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 32px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-card {
  width: 260px;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 24px 0 24px 0;
  min-height: 300px;
}

.content-card {
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgb(64 112 244 / 8%);
  border: none;
  padding: 32px 32px 24px 32px;
  min-height: 500px;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

@media (max-width: 1200px) {
  .userinfo-page {
    padding-left: 8px;
    padding-right: 8px;
  }
  .gap-6 {
    gap: 1rem;
  }
  .userinfo-card, .menu-card {
    width: 200px;
    padding: 24px 8px 16px 8px;
  }
  .content-card {
    padding: 16px 8px 16px 8px;
  }
}

@media (max-width: 900px) {
  .flex {
    flex-direction: column;
    align-items: stretch;
  }
  .left-panel, .userinfo-card, .menu-card, .content-card {
    width: 100% !important;
    min-width: 0;
    margin-bottom: 16px;
  }
  .gap-6 {
    gap: 0;
  }
  .left-panel {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.space-y-1 > * + * {
  margin-top: 0.25rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.placeholder-container {
  @apply flex items-center justify-center h-96 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300;
}

.placeholder-content {
  @apply text-center;
}
</style>
